<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">元罡智能平台 | 欢迎注册</h3>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="帐号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          auto-complete="off"
          placeholder="确认密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="phonenumber">
        <el-input v-model="registerForm.phonenumber" type="text" auto-complete="off" placeholder="手机号码">
          <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="userGroup" label="参赛组别">
        <el-radio-group v-model="registerForm.userGroup">
          <el-radio-button label="1" @click.native="selectEnterprise">企业组</el-radio-button>
          <el-radio-button label="" @click.native="selectMaker" v-show="!marker">创客组</el-radio-button>
          <el-radio-button label="2" v-show="marker">团队</el-radio-button>
          <el-radio-button label="3" v-show="marker">个人</el-radio-button>
        </el-radio-group>
        <div style="float: right;">
          <svg-icon slot="prefix" icon-class="question" class="el-input__icon input-icon" @click="showGroupTypeInfo"/>
        </div>
      </el-form-item>
      <!--      <el-form-item prop="smsCode">-->
      <!--        <el-input-->
      <!--          v-model="registerForm.smsCode"-->
      <!--          auto-complete="off"-->
      <!--          placeholder="输入手机验证码"-->
      <!--          style="width: 63%"-->
      <!--          @keyup.enter.native="handleLogin"-->
      <!--        >-->
      <!--          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
      <!--        </el-input>-->
      <!--        <div class="login-code">-->
      <!--          <el-button round @click.native.prevent="getSmsCode">{{computeTime>0 ? `(${computeTime}s)已发送` : '获取手机验证码'}}</el-button>-->
      <!--        </div>-->
      <!--      </el-form-item>-->
      <el-form-item prop="code" v-if="captchaOnOff">
        <el-input
          v-model="registerForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 48%"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="register-code">
          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
        </div>
      </el-form-item>
      <!--      <el-checkbox v-model="registerForm.readNotice" @click="showNotice">我已阅读并同意《参赛须知》</el-checkbox><br><br>-->
      <el-form-item prop="readNotice">
        <el-checkbox v-model="registerForm.readNotice" v-show="true" @change="showNotice" label="我已阅读并同意《参赛须知》"></el-checkbox>
        <!--        <a @click="showNotice" style="font-size: 14px; color: #337ab7"> 我已阅读并同意《参赛须知》</a>-->
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleRegister"
        >
          <span v-if="!loading">注 册</span>
          <span v-else>注 册 中...</span>
        </el-button>
        <div style="float: right;">
          <router-link class="link-type" :to="'/login'">我已注册，使用已有账户登录</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-register-footer">
      <span style="white-space: pre-wrap;word-break: break-all;">{{footerInfo}}</span>
      <br>备案号：<a href="https://beian.miit.gov.cn/" target="_blank">{{recordNumber}}</a>
    </div>

    <!-- 参赛组别解释说明对话框 -->
    <el-dialog :title="groupTypeInfoTitle" :visible.sync="groupTypeInfoShow" width="350px" append-to-body>
      <div>
        1.企业组<br>
        （1）在中国境内及港澳台地区注册，符合《中小企业划型标准规定》（工信部联企业〔2011〕300号）的中小微企业。<br>
        （2）参赛项目已进入市场，具有良好发展潜力。<br>
        （3）拥有自主知识产权且无产权纠纷，无不良记录。<br>
        （4）往届“创客中国”大赛区域（专题）赛获得一、二、三等奖的参赛项目，不参加本届赛事。<br>
        2.创客组<br>
        （1）遵纪守法的个人或团队。<br>
        （2）团队的核心成员不超过5人。<br>
        （3）参赛项目的创意、产品、技术及相关专利归属或授权参赛团队，与其它单位或个人无知识产权纠纷。<br>
        （4）往届“创客中国”大赛区域（专题）赛获得一、二、三等奖的参赛项目，不参加本届赛事。<br>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupTypeInfoShow = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 参赛须知对话框 -->
    <el-dialog :title="noticeTitle" :visible.sync="noticeShow" width="350px" append-to-body>
      <div>
        欢迎您参加第七届“创客中国”广东省中小企业创新创业大赛暨第六届“创客广东”大赛,请仔细阅读参赛须知：<br><br>
        1、确保参赛信息和项目材料真实有效，符合“创客广东”大赛参赛条件，有关内容严格遵守中华人民共和国相关法律法规，不包含违背社会主义核心价值观的内容。<br><br>
        2、参赛者须按照指定时间和要求提交项目材料，因参赛者个人原因或网络通道等第三方产生的损毁、延误等，大赛组委会不承担相关责任。<br><br>
        3、参赛者须积极配合组委会工作安排，不得无故缺席或退赛，如因特殊原因确实无法继续参赛，须向大赛组委会提交退赛申请。<br><br>
        4、参赛项目资料版权和著作权由参赛者所有。组委会有权无偿使用参赛项目相关的文字、图表、音频、视频等资料，开展公益宣传与教育等非商业性活动。<br><br>
        5、同意通过电子邮件、手机短信和电话等方式接收大赛有关通知信息。<br><br>
        6.对于违反有关法律法规、包含有害信息，或存在材料弄虚作假、不符合参赛条件、提交材料超期以及不配合工作安排等情况的项目，组委会保留取消参赛者参赛资格、参赛成绩以及所有已获奖励的权利。<br><br>
        本须知的最终解释权归大赛组委会所有。
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click.native.prevent="sureNotify">{{notifyTime>0 ? `(${notifyTime}s)请仔细阅读` : '已阅读并同意'}}</el-button>
        <!--        <el-button type="primary" @click="sureNotify">同 意</el-button>-->
        <el-button @click="noticeShow = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCodeImg , register } from "@/api/login";
import { getFooterInfo, getRecordNumber } from "@/api/system/basic";

export default {
  name: "Register",
  data() {
    const validPassword = (rule, value, callback) => {
      const num = /^.*[0-9]+.*/;
      const low = /^.*[a-z]+.*/;
      const up = /^.*[A-Z]+.*/;
      const spe = /^.*[^a-zA-Z0-9]+.*/;
      const passLength = value.length > 5 && value.length < 21;
      if ( !(num.test(value) && low.test(value) && up.test(value) && spe.test(value) && passLength) ) {
        callback(new Error("密码6-20位，必须包含大写小写字母、数字及特殊字符"));
      } else {
        callback();
      }
    };
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const needSureNotify = (rule, value, callback) => {
      if (this.registerForm.readNotice == false) {
        callback(new Error("请勾选已阅读参赛须知"));
      } else {
        callback();
      }
    };
    const correctMobileForm = (rule, value, callback) => {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if ((!reg.test(value)) && value != '') {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      codeUrl: "",
      notifyTime: 0,
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: "",
        smsCode: "",
        phonenumber: "",
        userType: "10",
        userGroup: null,
        readNotice: false
      },
      registerRules: {
        username: [
          { required: true, trigger: "change", message: "请输入您的帐号" },
          { min: 2, max: 20, message: '用户帐号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: "change", message: "请输入您的密码" },
          // { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
          { required: true, validator: validPassword, trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, trigger: "change", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        phonenumber: [
          { required: true, trigger: "change", message: "请输入手机号码" },
          { required: true, validator: correctMobileForm, trigger: "blur" }
        ],
        userGroup: [{ required: true, trigger: "change", message: "请选择参赛组别" }],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
        readNotice: [
          { required: true, trigger: "change", message: "请勾选已阅读参赛须知" },
          { required: true, validator: needSureNotify, trigger: "change" }
        ]
      },
      loading: false,
      captchaOnOff: true,
      computeTime: 0,
      marker: false,
      groupTypeInfoShow: false,
      groupTypeInfoTitle: "",
      noticeShow: false,
      noticeTitle: "",
      // 页脚信息
      footerInfo: "",
      // 页脚备案号
      recordNumber: ""
    };
  },
  created() {
    this.getCode();
    this.getFooter();
    this.getRecord();
  },
  methods: {
    getFooter() {
      getFooterInfo().then(response => {
        this.footerInfo = response.data.basiData;
      });
    },
    getRecord() {
      getRecordNumber().then(response => {
        this.recordNumber = response.data.basiData;
      });
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.registerForm.uuid = res.uuid;
        }
      });
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then(res => {
            const username = this.registerForm.username;
            this.$alert("<font color='green'>恭喜你，您的帐号  " + username + "  注册成功！</font>", '大赛平台提示', {
              dangerouslyUseHTMLString: true,
              type: "success"
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          })
        }
      });
    },
    selectEnterprise() {
      this.marker = false;
    },
    selectMaker() {
      this.marker = true;
    },
    showGroupTypeInfo() {
      this.groupTypeInfoTitle = "参赛组别说明";
      this.groupTypeInfoShow = true;
    },
    showState() {
      this.$modal.msgWarning("readNotify state: " + this.registerForm.readNotice);
    },
    showNotice() {
      this.noticeTitle = "参赛须知"
      this.notifyTime = 5;
      this.timer = setInterval(() => {
        this.notifyTime--;
        if (this.notifyTime <= 0) {
          clearInterval(this.timer)
        }
      }, 1000);
      this.noticeShow =  true;
      this.registerForm.readNotice = false;
    },
    sureNotify() {
      if (!this.notifyTime) {
        this.registerForm.readNotice = true;
        this.noticeShow = false;
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 80px;
  line-height: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>
